<template>
    <div>
        <h1>一个人的信息</h1>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <h2>爱好：{{person.hobby}}</h2>
        <h2>工作种类：{{person.job.type}}</h2>
        <h2>工作薪水：{{person.job.salary}}</h2>
        <h2>测试数据：{{person.job.a.b.c}}</h2>
        <button @click="sayHello">hello</button>
        <button @click="changeInfo">更新人的信息</button>

    </div>
</template>

<script>

// import {h} from "vue";

// import {ref,reactive} from "vue";
import {reactive} from "vue";

export default {
    name: 'App',
    setup(){
        // let name = ref('张三');
        // let age = ref(20);
        // let job = reactive({
        //     type: "前端工程师",
        //     salary: '30k',
        //     a:{
        //         b:{
        //             c:666
        //         }
        //     }
        // });
        // let hobby = reactive(['抽烟','喝酒','烫头']);

        let person = reactive({
            name: '张三',
            age: 20,
            job: {
                type: "前端工程师",
                salary: '30k',
                a: {
                    b: {
                        c: 666
                    }
                }
            },
            hobby: ['抽烟','喝酒','烫头']
        })

        function sayHello(){
            alert(`Hello World! 我是${person.name}，年龄${person.age}`);
        }
        function changeInfo(){
            person.name = '李四';
            person.age = 18;
            person.job.type = "UI工程师";
            person.job.salary = '20k';
            person.job.a.b.c=777;
            console.log('job', person.job);
            person.hobby[0]='学习';
        }
        return {
            person,
            sayHello,
            changeInfo
        }

    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
